<template>
    <div class="nav">
        <div class="nav-img" v-for="(arr,index) in nav" @click="yanse(index)">
            <RouterLink :to="{
                name: 'home_sp',
                query: {
                    id: arr.id
                }
            }" >
                <p :class="index==suoyin?'bianse':''">{{ arr.top }}</p>
                <p class="hui" :class="index==suoyin?'bianse1':''">{{ arr.bottom }}</p>
            </RouterLink>
        </div>
    </div>
    <div class="shangpin">
        <RouterView></RouterView>
    </div>
</template>
<script setup lang='ts'>
import { ref } from "vue";
let nav = [
    {   id:"2",
        top: "精选",
        bottom: "猜你喜欢",
    },
    {
        id:"8",
        top: "美妆",
        bottom: "魅力妆扮",
    },
    {
        id:"5",
        top: "母婴",
        bottom: "家有萌宝",
    },
    {
        id:"9",
        top: "数码",
        bottom: "酷玩科技",
    },
    {
        id:"10",
        top: "保健",
        bottom: "好物推荐",
    },
]
let suoyin = ref(0)
function yanse(index) {
    suoyin.value = index   
}
</script>
<style scoped>
.nav {
    text-align: center;
    font-size: 0.16rem;
    width: 100%;
    color: #737373;
    display: flex;
}
.nav .nav-img {
    flex: 1;
}
.hui {
    color: #999999;
    font-size: 0.11rem;
}

.shangpin {
    margin-bottom: 0.6rem;
}

.nav a {
    text-decoration: none;
}
.bianse{
    color: #ff0000;
}
.bianse1{
    color: #ffffff;
    width: 0.6rem;
    height: 0.16rem;
    background-color: #f53f3f;
    border-radius: 0.1rem;
    margin: 0 auto;;
}
</style>